import React, { useState } from 'react'
import iconJSON from '../../config/icon.json'
import { Modal } from '../Modal'

const GongYongSelectIcon = (
    {
        hostname = 'https://static.cvei.cn/static/',
        defaultSelectedType = iconJSON[0].type,
        defaultSelectedIcon = iconJSON[0].children[0].url,
        onOk,
        onCancel,
        visible,
        ...props
    }
) => {
    // json中type区分
    const [selectedType, setSelectedType] = useState(defaultSelectedType)
    // json中url区分
    const [selectedIcon, setSelectedIcon] = useState(defaultSelectedIcon)

    const handleSwitchType = ({ type, children }) => {
        setSelectedType(type)
        if (children[0]?.url) {
            setSelectedIcon(children[0].url)
        }
    }
    const handleOk = () => {
        onOk?.({
            type: selectedType,
            icon: selectedIcon,
            iconJSON
        })
    }

    return (
        <Modal
            {...props}
            visible={visible}
            getContainer={() => document.body}
            title={'请选择应用icon'}
            onOk={handleOk}
            onCancel={onCancel}
        >
            <div>
                <div className='gy-select-header'>
                    {iconJSON.map(iconType => (
                        <div
                            className={`gy-select-item ${iconType.type === selectedType ? 'gy-selected' : ''}`}
                            onClick={() => handleSwitchType(iconType)}
                            key={iconType.type}
                        >
                            <div className='gy-select-color' style={{ background: iconType.color }}/>
                            <p>{iconType.name}</p>
                        </div>
                    ))}
                </div>
                <div className='gy-select-main'>
                    {iconJSON
                        .find(({ type }) => type === selectedType)
                        ?.children
                        ?.map(icon => (
                            <div
                                className={`gy-icon ${selectedIcon === icon.url ? 'gy-icon-selected' : ''}`}
                                onClick={() => setSelectedIcon(icon.url)}
                                key={icon.url}
                            >
                                <img src={`${hostname}${icon.url}`} alt=''/>
                            </div>
                        ))}
                </div>
            </div>
        </Modal>
    );
}

export default GongYongSelectIcon